import { FlagOutlined, LeftOutlined, RightOutlined } from "@ant-design/icons";
import { Button, Col, Drawer, Empty, Row, Space, Steps } from "antd";
import Search from "antd/lib/input/Search";
import { Feature } from "ol";
import { Coordinate } from "ol/coordinate";
import LineString from "ol/geom/LineString";
import Point from "ol/geom/Point";
import React from "react";
import { selectFeature } from "../DetailDrawerBuilder";
import { getMainMap } from "./MainMap";
import { RoutingStepArray } from "./routinglib";

type Props = {
  visible: boolean;
  routingArray: RoutingStepArray;
  dumpRouting: (name: string, routing: string) => void;
};

type State = {
  current: number;
};

export default class RoutingStepBuilder extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { current: 0 };
  }

  moveMapCenterTo(coordinate: Coordinate) {
    const view = getMainMap().getView();
    const curZoom = view.getZoom() as number;
    view.animate(
      {
        center: coordinate,
        zoom: curZoom - 1,
        duration: 500,
      },
      {
        zoom: 20,
        duration: 300,
      }
    );
  }

  onChange = (current: number) => {
    const feature = this.props.routingArray.array[current];
    selectFeature(feature);
    this.setState({
      current: current,
    });
  };

  stepFromPoint(point: Feature<Point>, key: number) {
    return (
      <Steps.Step
        key={key}
        title={point.get("名称")}
        subTitle={point.get("开放时间")}
        description={point.get("routing-remark")}
      />
    );
  }

  stepFromLineString(line: Feature<LineString>, key: number) {
    return (
      <Steps.Step
        key={key}
        title="道路"
        description={line.get("routing-remark")}
      />
    );
  }

  gotoPrev = () => {
    const prev = this.state.current === 0 ? 0 : this.state.current - 1;
    this.onChange(prev);
  };

  gotoNext = () => {
    const current = this.state.current;
    const next =
      current === this.props.routingArray.length - 1 ? current : current + 1;
    this.onChange(next);
  };

  gotoFirst = () => {
    this.onChange(0);
  };

  onSaveRouting = (name: string) => {
    this.props.dumpRouting(name, this.props.routingArray.serialize());
  };

  render(): React.ReactNode {
    if (this.props.routingArray.length > 0) {
      const stepArray = this.props.routingArray.array.map((step, idx) => {
        if (step.getGeometry()?.getType() === "Point") {
          return this.stepFromPoint(step as Feature<Point>, idx);
        } else {
          return this.stepFromLineString(step as Feature<LineString>, idx);
        }
      });
      return (
        <Drawer
          visible={this.props.visible}
          closable={false}
          mask={false}
          placement="left"
          width="35%"
          onClose={() => {
            console.log("close!");
          }}
        >
          <Space direction="vertical">
            <Row>
              <Col span={20} offset={4}>
                <Space>
                  <Button
                    shape="circle"
                    icon={<LeftOutlined />}
                    onClick={this.gotoPrev}
                  ></Button>
                  <Button
                    type="primary"
                    size="large"
                    shape="round"
                    icon={<FlagOutlined />}
                    onClick={this.gotoFirst}
                  >
                    从起点开始
                  </Button>
                  <Button
                    shape="circle"
                    icon={<RightOutlined />}
                    onClick={this.gotoNext}
                  ></Button>
                </Space>
              </Col>
            </Row>
            <Row>
              <Col span={20} offset={4}>
                <Search
                  size="large"
                  placeholder="输入计划名称……"
                  allowClear
                  enterButton="提交"
                  onSearch={this.onSaveRouting}
                />
              </Col>
            </Row>
            <Steps
              current={this.state.current}
              onChange={this.onChange}
              direction="vertical"
            >
              {stepArray}
            </Steps>
          </Space>
        </Drawer>
      );
    } else {
      return (
        <Drawer
          visible={this.props.visible}
          mask={false}
          placement="left"
          width="35%"
          closable={false}
        >
          <Empty description="点击地图景点添加计划！" />
        </Drawer>
      );
    }
  }
}
